<template>
  <div v-if="mode === 'approve'">
    <div class="approval-form" v-if="widgetForm.list.length > 0 && isShowFormTitle(widgetForm.list)">
      <div class="approval-form-header">
        <h4>附加表单</h4>
        <i class="iconfont icon-chevron-down" @click="showForm = !showForm" :class="!showForm ? 'chevron-rotate ' : ''"></i>
      </div>
      <div v-show="showForm">
        <AntdGenerateForm style="margin-top: 20px" ref="generateFormRef" :data="widgetForm" />
      </div>
    </div>
    <div class="approval-process">
      <div class="approval-header">
        <div class="approval-header-title" v-if="props.isHideTab">
          <h4>
            {{ config.title || '审批流程' }}
          </h4>
          <i class="iconfont icon-chevron-down" @click="() => (isShowInfo = !isShowInfo)" :class="!isShowInfo ? 'chevron-rotate ' : ''"></i>
        </div>
        <a-tabs v-model:activeKey="activeKey" v-if="!props.isHideTab">
          <a-tab-pane key="1" tab="审批记录">
            <div class="approval-process-content" v-if="state.data.length > 0">
              <a-timeline>
                <a-timeline-item
                  :color="item.activityType == 'endEvent' ? 'gray' : item.activityType == 'startEvent' ? 'green' : index === state.data.length - 1 ? 'blue' : 'green'"
                  v-for="(item, index) in state.data"
                  :key="index"
                >
                  <template #dot v-if="index === state.data.length - 1">
                    <i class="iconfont icon-liuchengdian-jinhangzhong"></i>
                  </template>
                  <p class="time">{{ item.startTime }}</p>
                  <div class="title">
                    {{ item.activityType == 'endEvent' ? '结束' : item.activityName }}
                  </div>
                  <p class="first" v-if="item.approvalType">
                    <span>{{ item.nrOfInstances }}人{{ item.approvalType == 1 ? '会签' : '或签' }}</span>
                    <span v-if="item.outcome == 1">（同意）</span>
                    <span v-if="item.outcome == 2">（拒绝）</span>
                    <span v-if="item.outcome == 3">（退回）</span>
                  </p>
                  <div class="other" v-for="(subItem, idx) in item.participantInfos" :key="idx">
                    <p :class="{ first: !item.approvalType }" v-if="idx === 0">
                      <!-- <p v-if="!item.approvalType" class="time">{{ item.startTime }}</p> -->
                      <span>{{ subItem.assigneeName }}</span>
                      <span v-if="subItem.outcome == 1">（同意）</span>
                      <span v-if="subItem.outcome == 2">（拒绝）</span>
                      <span v-if="subItem.outcome == 3"> 退回 {{ subItem.targetActivityName ? `至${subItem.targetActivityName}` : '' }}</span>
                    </p>
                    <p v-if="idx !== 0">
                      <span>{{ subItem.assigneeName }}</span
                      ><span v-if="subItem.outcome == 1">（同意）</span>
                      <span v-if="subItem.outcome == 2">（拒绝）</span>
                      <span v-if="subItem.outcome == 3">（退回）</span>
                    </p>
                    <p v-if="subItem.comment">（审批意见：{{ subItem.comment }}）</p>
                    <p v-if="subItem?.images?.length > 0" class="images">
                      <a-image-preview-group>
                        <a-image :width="100" v-for="src in subItem.images" :src="fileUrl(src)" />
                      </a-image-preview-group>
                    </p>

                    <p v-if="subItem?.attachments?.length > 0" class="attachments">
                      <span v-for="file in subItem?.attachments">
                        <i class="iconfont icon-file"></i>
                        {{ file.name }}
                        <a-space style="margin-left: 10px">
                          <a-typography-link @click="handleView(file.id)">预览</a-typography-link>
                          <a-typography-link @click="handleDownload(file.id, file.name)">下载</a-typography-link>
                        </a-space>
                      </span>
                    </p>
                  </div>
                </a-timeline-item>
              </a-timeline>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="流程图">
            <approve :formData="state.xmlData" />
          </a-tab-pane>
        </a-tabs>
        <div v-show="isShowInfo" class="approval-process-content" v-if="state.data.length > 0 && props.isHideTab">
          <a-timeline>
            <a-timeline-item
              :color="item.activityType == 'endEvent' ? 'gray' : item.activityType == 'startEvent' ? 'green' : index === state.data.length - 1 ? 'blue' : 'green'"
              v-for="(item, index) in state.data"
              :key="index"
            >
              <template #dot v-if="index === state.data.length - 1">
                <i class="iconfont icon-liuchengdian-jinhangzhong"></i>
              </template>
              <p class="time">{{ item.startTime }}</p>
              <div class="title">
                {{ item.activityType == 'endEvent' ? '结束' : item.activityName }}
              </div>
              <p class="first" v-if="item.approvalType">
                <span>{{ item.nrOfInstances }}人{{ item.approvalType == 1 ? '会签' : '或签' }}</span>
                <span v-if="item.outcome == 1">（同意）</span>
                <span v-if="item.outcome == 2">（拒绝）</span>
                <span v-if="item.outcome == 3">（退回）</span>
              </p>
              <div class="other" v-for="(subItem, idx) in item.participantInfos" :key="idx">
                <p :class="{ first: !item.approvalType }" v-if="idx === 0">
                  <!-- <p v-if="!item.approvalType" class="time">{{ item.startTime }}</p> -->
                  <span>{{ subItem.assigneeName }}</span>
                  <span v-if="subItem.outcome == 1">（同意）</span>
                  <span v-if="subItem.outcome == 2">（拒绝）</span>
                  <span v-if="subItem.outcome == 3"> 退回 {{ subItem.targetActivityName ? `至${subItem.targetActivityName}` : '' }}</span>
                </p>
                <p v-if="idx !== 0">
                  <span>{{ subItem.assigneeName }}</span
                  ><span v-if="subItem.outcome == 1">（同意）</span>
                  <span v-if="subItem.outcome == 2">（拒绝）</span>
                  <span v-if="subItem.outcome == 3">（退回）</span>
                </p>
                <p v-if="subItem.comment">（审批意见：{{ subItem.comment }}）</p>
                <p v-if="subItem?.images?.length > 0" class="images">
                  <a-image-preview-group>
                    <a-image :width="100" v-for="src in subItem.images" :src="fileUrl(src)" />
                  </a-image-preview-group>
                </p>

                <p v-if="subItem?.attachments?.length > 0" class="attachments">
                  <span v-for="file in subItem?.attachments">
                    <i class="iconfont icon-file"></i>
                    {{ file.name }}
                    <a-space style="margin-left: 10px">
                      <a-typography-link @click="handleView(file.id)">预览</a-typography-link>
                      <a-typography-link @click="handleDownload(file.id, file.name)">下载</a-typography-link>
                    </a-space>
                  </span>
                </p>
              </div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
      <div class="approval-bottom" v-if="props.config">
        <a-space>
          <a-button v-if="props.config.showBackBtn" @click="handleBack">返回</a-button>
          <a-button v-if="props.config.showGoBackBtn && isPending" @click="onBtnClick('goBack')">退回</a-button>
          <a-button v-if="props.config.showRejectBtn && isPending" @click="onBtnClick('reject')">拒绝</a-button>
          <a-button v-if="props.config.showAgreeBtn && !isEndTask && isPending" type="primary" @click="onBtnClick('agree')">同意</a-button>
          <slot></slot>
        </a-space>
      </div>
    </div>
  </div>
  <intervene v-if="mode === 'intervene'"></intervene>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted, nextTick, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import approve from './approve/index.vue';
import intervene from './intervene/index.vue';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { DYNAMICLAYERCLEAR, DYNAMICLAYERFORM, LOCALSUBSERVE } from '@/mixins/subject/subject-types';
import { InputQuestion, UploadQuestion, QuestionBase, SelectQuestion, RadioQuestion } from '@/components/public-template/DynamicForm/dynamic-form-base';
import { AntdGenerateForm } from './designForm';
import router from '@/router';
import { message } from 'ant-design-vue';
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import errImg from '@/assets/img/errImg.svg';
import { HOST } from '@/config';
import indexService from './index.service';
// 审批模式  审批approve   介入 intervene
const isShowInfo = ref(true);
const mode = ref('approve');
const fileUrl = (id) => {
  if (id) {
    return `${HOST}/dmsfile/resourcePublicFileInfo/viewFile/${id}`;
  } else {
    return errImg;
  }
};
const isShowFormTitle = (data) => {
  let flag = false;
  if (!data) return false;
  data?.map((item: any) => {
    if (item?.formPermission?.operate !== 0) {
      flag = true;
    }
  });
  return flag;
};
const route = useRoute();
const isQiankun = qiankunWindow.__POWERED_BY_QIANKUN__;
const emit = defineEmits(['back']);
const activeKey = ref<string>('1');
let $subscribeSub: Subscription;
const { proxy }: any = getCurrentInstance();
const state = reactive({
  data: [],
  xmlData: ''
});
const isPending = ref(false);
const currentTaskId = ref('');
const showForm = ref(true);
const generateFormRef = ref();
const widgetForm = ref({
  list: [],
  config: {
    size: 'default',
    hideRequiredMark: false,
    layout: 'inline',
    labelAlign: 'right',
    labelCol: {
      style: {
        width: '200px'
      }
    },
    wrapperCol: {
      style: {
        width: '300px'
      }
    }
  }
});
interface IConfig {
  title: string;
  showBackBtn: boolean;
  showAgreeBtn: boolean;
  showRejectBtn: boolean;
}
const props = defineProps<{
  config?: IConfig | any;
  isHideTab?: boolean;
}>();

const isEndTask = ref<boolean>(false);

const handleBack = () => {
  if (isQiankun) {
    // emit('back', () => proxy?.$parentRouter?.go(-1));
    if (route.query?.detailType === 'intervene') {
      emit('back', () => proxy?.$parentRouter.push({ name: 'ApproveManageSummary' }));
    } else if (route.query?.detailType === 'approve') {
      emit('back', () => proxy?.$parentRouter.push({ name: 'ApprovalList', query: { tabType: route.query.tabType } }));
    } else {
      emit('back', () => router.go(-1));
    }
  } else {
    emit('back', () => router.push({ name: 'ApprovalList', query: { tabType: route.query.tabType } }));
  }
};

onMounted(() => {
  subWatchForm();
  nextTick(() => {
    init();
  });
});
onUnmounted(() => {
  if ($subscribeSub != undefined) {
    $subscribeSub.unsubscribe();
  }
  proxy.$NotificationFormSub.clearParams();
});
const subWatchForm = () => {
  $subscribeSub = proxy.$NotificationFormSub
    .getParams()
    .pipe(filter((res: any) => res !== 0))
    .subscribe(async (item: any) => {
      try {
        if (item.key === LOCALSUBSERVE && item.state.name === 'flowAgree') {
          handleAgree(item.value);
        }
        if (item.key === LOCALSUBSERVE && item.state.name === 'flowReject') {
          handleReject(item.value);
        }
        if (item.key === LOCALSUBSERVE && item.state.name === 'flowGoBack') {
          handleGoBack(item.value);
        }
      } catch (err) {
        /* empty */
      }
    });
};
const init = () => {
  // 判断是审批介入 还是审批中心
  if (route.query?.detailType === 'intervene') {
    mode.value = 'intervene';
  } else {
    mode.value = 'approve';
    route.query?.processInstanceId && getActivitiesList();
    if (route.query?.userType) {
      getCurrentFormInfo(route.query.processInstanceId as string);
    } else {
      route.query?.processInstanceId && getTaskId(route.query.processInstanceId as string);
    }
  }
};

const handleCloseModal = () => {
  proxy.$NotificationPubSub.pushParams({ key: DYNAMICLAYERCLEAR, value: { name: 'form' } });
  handleBack();
};
const onBtnClick = async (type: string) => {
  btnInfoFn[type]?.();
};
const btnInfoFn = {
  goBack: async () => {
    const info = await getGoBackList(currentTaskId.value);
    await getOrgData();
    let list = [];
    if (info?.success) {
      list =
        info.data?.map((item) => {
          return { label: item.name, value: item.id };
        }) || [];
      if (list.length === 0) {
        message.error('当前节点为首节点，无法执行退回上一节点操作！');
        return;
      }
    }
    const formList = indexService.getGoBackQuestions();
    formList.map((question: any) => {
      if (question.key === 'goBackId') {
        question.options = list;
      }
      if (question.key === 'ccs') {
        question.options = orgList.value;
      }
    });
    const part = {
      type: 'layer',
      url: 'flowabel/process/instance/goback',
      params: [{ id: 'id' }],
      state: {
        key: '',
        config: {
          updateUrl: 'flowabel/process/instance/goback',
          width: '760px',
          title: '审批退回',
          // style: 'table-form',
          layout: 'vertical',
          name: 'flowGoBack',
          localSub: true,
          cancelSave: false,
          maskClose: false, // 点击蒙层不关闭弹层
          rowKey: 'key', // 唯一标识
          okText: '确认',
          type: 'layer',
          btnPosition: 'center',
          grid: 24,
          labelCol: 24
        },
        form: formList
      }
    };
    proxy.$NotificationPubSub.pushParams({ key: DYNAMICLAYERFORM, value: { part } });
  },
  reject: async () => {
    await getOrgData();
    const questions = indexService.getRejectQuestions();
    questions.map((question) => {
      if (question.key === 'ccs') {
        question.options = orgList.value;
      }
    });
    const part = {
      type: 'layer',
      url: 'flowabel/process/instance/goback',
      params: [{ id: 'id' }],
      state: {
        key: '',
        config: {
          updateUrl: 'flowabel/process/instance/goback',
          width: '760px',
          title: '审批拒绝意见',
          name: 'flowReject',
          localSub: true,
          // style: 'table-form',
          layout: 'vertical',
          cancelSave: false,
          rowKey: 'key', // 唯一标识
          okText: '确认',
          maskClose: false,
          type: 'layer',
          btnPosition: 'center',
          grid: 24,
          labelCol: 24
        },
        form: questions
      }
    };
    proxy.$NotificationPubSub.pushParams({ key: DYNAMICLAYERFORM, value: { part } });
  },
  agree: () => {
    getAgreeNext();
  }
};
// 我的申请 已处理 获取表单
const getCurrentFormInfo = (processInstanceId: string) => {
  proxy.$Http.api('flowable/process/instance/form/user', { processInstanceId }, 'post').then((res: any) => {
    widgetForm.value.list = res.data?.list || [];
  });
};
const getTaskFormInfo = (taskId: string) => {
  proxy.$Http.api('flowable/process/instance/task/form', { taskId }, 'post').then((res: any) => {
    widgetForm.value.list = res.data?.list || [];
  });
};
const handleAgree = async (data: any) => {
  if (generateFormRef.value) {
    generateFormRef.value.getData().then((res) => {
      const params = { ...data, taskId: currentTaskId.value, variables: { ...res } };
      if (data.nextActivityApprovers?.length > 0) {
        params.nextActivityId = nextActivityId.value;
      }
      proxy.$Http.api('flowable/process/instance/pass', params, 'post').then((res: any) => {
        if (res.success) {
          message.success('成功');
          handleCloseModal();
        }
      });
    });
  } else {
    const params = { ...data, taskId: currentTaskId.value };
    if (data.nextActivityApprovers?.length > 0) {
      params.nextActivityId = nextActivityId.value;
    }
    proxy.$Http.api('flowable/process/instance/pass', params, 'post').then((res: any) => {
      if (res.success) {
        message.success('成功');
        handleCloseModal();
      }
    });
  }
};
const handleGoBack = (data: any) => {
  if (generateFormRef.value) {
    generateFormRef.value.getData().then((res) => {
      const params = { ...data, taskId: currentTaskId.value, variables: { ...res } };
      proxy.$Http.api('flowable/process/instance/goback', params, 'post').then((res: any) => {
        if (res.success) {
          message.success('成功');
          handleCloseModal();
        }
      });
    });
  } else {
    const params = { ...data, taskId: currentTaskId.value };
    proxy.$Http.api('flowable/process/instance/goback', params, 'post').then((res: any) => {
      if (res.success) {
        message.success('成功');
        handleCloseModal();
      }
    });
  }
};
const handleReject = (data: any) => {
  if (generateFormRef.value) {
    generateFormRef.value.getData().then((res) => {
      const params = { ...data, taskId: currentTaskId.value, variables: { ...res } };
      proxy.$Http.api('flowable/process/instance/reject', params, 'post').then((res: any) => {
        if (res.success) {
          message.success('成功');
          handleCloseModal();
        }
      });
    });
  } else {
    const params = { ...data, taskId: currentTaskId.value };
    proxy.$Http.api('flowable/process/instance/reject', params, 'post').then((res: any) => {
      if (res.success) {
        message.success('成功');
        handleCloseModal();
      }
    });
  }
};
// 查询 taskId
const getTaskId = (id: string) => {
  proxy.$Http.api('flowable/process/instance/task', { processInstanceId: id }, 'post').then((res: any) => {
    if (res?.data?.taskId) {
      isPending.value = true;
      currentTaskId.value = res.data.taskId;
      getTaskFormInfo(res.data.taskId);
    }
  });
};
//查询 审批流程列表 流程图
const getActivitiesList = () => {
  const params = {
    processInstanceId: route.query?.processInstanceId
  };
  proxy.$Http.api('flowable/process/instance/list/activities', params, 'post').then((res) => {
    if (res?.success) {
      state.data = res.data?.activities || [];
      state.xmlData = res.data?.xml;
      if (state.data.find((item) => item.activityType == 'endEvent')) {
        isEndTask.value = true;
      }
    }
  });
};
// 查可退回的节点
const getGoBackList = (taskId: string) => {
  if (!taskId) return Promise.resolve({});
  return proxy.$Http.api('flowable/process/instance/goback/list', { taskId }, 'post');
};
// 点击同意 查询是否可是设置下级审批人
const nextActivityId = ref('');
const getAgreeNext = async () => {
  const params = {
    taskId: currentTaskId.value
  };
  await getOrgData();
  proxy.$Http.api('flowable/process/instance/nextFlowNode', params, 'post').then((res) => {
    if (res?.data) {
      if (res.data?.id) {
        const questions = indexService.getAgreeQuestions();
        nextActivityId.value = res.data.id;
        //
        questions.map((question) => {
          if (question.key === 'nextActivityApprovers') {
            question.hidden = false;
            question.options = res.data?.candidateUsers?.map((item) => ({ label: item.nickName, value: item.id })) || [];
          }
          if (question.key === 'ccs') {
            question.options = orgList.value;
          }
        });
        const part = {
          type: 'layer',
          url: '/flowable/process/instance/pass',
          params: [{ id: 'id' }],
          state: {
            key: '',
            config: {
              updateUrl: '/flowable/process/instance/pass',
              width: '760px',
              title: '审批同意意见',
              name: 'flowAgree',
              // style: 'table-form',
              layout: 'vertical',
              cancelSave: false,
              maskClose: false, // 点击蒙层不关闭弹层
              localSub: true,
              rowKey: 'key', // 唯一标识
              okText: '确认',
              type: 'layer',
              btnPosition: 'center',
              grid: 24,
              labelCol: 24
            },
            form: questions
          }
        };
        proxy.$NotificationPubSub.pushParams({ key: DYNAMICLAYERFORM, value: { part } });
      }
    } else {
      const questions = indexService.getAgreeQuestions();
      questions.map((question) => {
        if (question.key === 'ccs') {
          question.options = orgList.value;
        }
      });
      const part = {
        type: 'layer',
        url: '/flowable/process/instance/pass',
        params: [{ id: 'id' }],
        state: {
          key: '',
          config: {
            updateUrl: '/flowable/process/instance/pass',
            width: '760px',
            title: '审批同意意见',
            name: 'flowAgree',
            // style: 'table-form',
            layout: 'vertical',
            cancelSave: false,
            maskClose: false, // 点击蒙层不关闭弹层
            localSub: true,
            rowKey: 'key', // 唯一标识
            okText: '确认',
            type: 'layer',
            btnPosition: 'center',
            grid: 24,
            labelCol: 24
          },
          form: questions
        }
      };
      proxy.$NotificationPubSub.pushParams({ key: DYNAMICLAYERFORM, value: { part } });
    }
  });
};
const handleView = (id: string) => {
  if (!id) {
    message.error('数据异常！');
    return;
  }
  const params = {
    id,
    safeMode: true,
    timeUnit: 'DAYS',
    expires: 1
  };
  proxy.$Http.api(`dmsfile/resourceFileInfo/getPreviewFileUrl`, params, 'post').then((res: any) => {
    if (res.success) {
      window.open(res.data);
    }
  });
};
// 下载附件
const handleDownload = (id: string, name: string) => {
  // window.open(fileUrl(id));
  proxy.$Http.api(`dmsfile/resourceFileInfo/viewFile/${id}`, {}, 'get', false, '', { responseType: 'blob', timeout: 1000000 }).then((res) => {
    var blob = new Blob([res]);
    // 创建一个隐藏的用来下载文件的a标签
    var elink = document.createElement('a');
    elink.download = name;
    elink.style.display = 'none';

    const src = URL.createObjectURL(blob);
    elink.href = src;
    document.body.appendChild(elink);

    // 模拟点击下载事件,进行下载
    elink.click();

    // 点击之后,移除我们定义的隐藏a标签
    document.body.removeChild(elink);

    // 移除文件对象
    URL.revokeObjectURL(src);
  });
};
const orgList = ref([]);
const originTreeData = ref([
  {
    children: [],
    name: '内部用户',
    id: 'internalData',
    key: 'internalData',
    selectable: false,
    label: '内部用户',
    value: 'internalData'
  },
  {
    children: [
      {
        children: [],
        name: '客户',
        id: 'customer',
        key: 'customer',
        selectable: false,
        label: '客户',
        value: 'customer'
      },
      {
        children: [],
        name: '供应商',
        id: 'supplier',
        key: 'supplier',
        selectable: false,
        label: '供应商',
        value: 'supplier'
      },
      {
        children: [],
        name: '游客',
        id: 'subjectResSimple',
        key: 'subjectResSimple',
        selectable: false,
        label: '游客',
        value: 'subjectResSimple'
      }
    ],
    name: '外部用户',
    id: 'externalData',
    key: 'externalData',
    selectable: false,
    label: '外部用户',
    value: 'externalData'
  }
]);
const getOrgData = async () => {
  const res = await proxy.$Http.api(`system/subject/findSubjectTree`, '', 'get');
  let { supplierResList = [], orgResList = [], subjectResSimpleList = [], customerResList = [] } = res?.data;
  customerResList = customerResList?.filter?.((item) => item.name);
  handleSetLabel(supplierResList);
  handleSetLabel(subjectResSimpleList);
  handleSetLabel(customerResList);
  handleOrgData(orgResList);
  originTreeData.value[0].children = orgResList;
  originTreeData.value[1].children[0].children = customerResList;
  originTreeData.value[1].children[1].children = supplierResList;
  originTreeData.value[1].children[2].children = subjectResSimpleList;
  orgList.value = originTreeData.value;
  // handleOrgData(orgList.value);
};
// 转换人员下拉数据
const handleSetLabel = (data) => {
  if (!data?.length) return;
  data.map((item) => {
    item.label = item.name;
    item.value = item.id;
  });
};
// 处理机构人员数据
const handleOrgData = (treeList: any) => {
  treeList?.map((node) => {
    let subjectSimpleList = [];
    node.value = node.id;
    node.label = node.name;
    if (node.subjectSimpleList) {
      node.subjectSimpleList.forEach((v: any) => {
        v.name = v.nickName;
        subjectSimpleList.push(v);
      });
    }
    // 机构禁止选
    if (node?.code) {
      node.selectable = false;
    }
    node.children = node.childOrg || [];
    node.children.push(...subjectSimpleList);
    if (node?.children?.length > 0) {
      handleOrgData(node?.children);
    }
  });
};
const setTreeData = (data: any) => {
  data = data.map((item: any) => {
    item.children = [];
    let subjectSimpleList = [];
    item.value = item.id;
    item.label = item.name;
    if (item?.code) {
      item.selectable = false;
    }
    if (item.subjectSimpleList) {
      item.subjectSimpleList.forEach((v: any) => {
        v.name = v.nickName;
        subjectSimpleList.push(v);
      });
    }
    item.childOrg = item.childOrg || [];
    item.children = item.childOrg ? setTreeData(item.childOrg) : item.childOrg;
    item.children = item.childOrg.concat(subjectSimpleList);
    return {
      ...item
    };
  });
  return data;
};

defineExpose({
  getCurrentFormInfo,
  state
});
</script>

<style lang="less" scoped>
.approval-form {
  background-color: #ffffff;
  margin-top: 20px;
  min-height: 200px;
  padding: 10px 22px;
  .approval-form-header {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  h4 {
    // width: 76px;
    border-left: 4px solid #005aea;
    padding-left: 10px;
    margin-right: 5px;
    line-height: 16px;
    height: 16px;
    font-size: 16px;
    font-weight: bold;
  }
}
.approval-process {
  margin-top: 20px;
  background-color: #ffffff;
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  .approval-header {
    padding: 10px 10px;
    flex: 1;
    h4 {
      font-weight: 600;
      font-size: 16px;
      line-height: 18px;
      height: 20px;
      padding-left: 10px;
      margin-bottom: 20px;
      margin-top: 20px;
      border-left: 4px solid #005aea;
      position: relative;
    }
    .approval-header-title {
      display: flex;
      align-items: center;

      i {
        height: 20px;
        margin-left: 10px;
        color: black;
      }
    }
  }

  .approval-process-content {
    padding-left: 10px;
    margin-top: 20px;
    .title {
      margin-top: 5px;
      margin-bottom: 5px;
      height: 26px;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 26px;
    }
    :deep(.ant-timeline-item-head-blue) {
      border-color: #005aea;
    }
    :deep(.ant-timeline-item-head-green) {
      border-color: #52c41a;
    }
    :deep(.ant-timeline-item-head-gray) {
      border-color: rgba(0, 0, 0, 0.25);
    }

    .time {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
    }
    .first {
      overflow: hidden;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }
    .other {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }
    .images {
      margin-top: 12px;
    }
    .attachments {
      margin-top: 12px;
    }
  }
  .approval-bottom {
    position: fixed;
    bottom: 50px;
    left: 48%;
    // margin-top: 30px;
    // margin-bottom: 20px;
    text-align: center;
  }
}
.chevron-rotate {
  transform: rotate(-90deg);
}
.avatar-uploader:nth-child(2) {
  display: flex;
  max-height: 200px !important;
  overflow-y: auto !important;
}
</style>
